<template>
  <div
    style="
      background-color: #f8f8fa;
      padding: 16px 24px 0 16px;
      display: flex;
      justify-content: space-evenly;
      height: 94vh;
      width: 90vw;
    ">
    <div style="width: 30vw; height: 100%; background-color: #fff; overflow-x: hidden; overflow-y: auto">
      <div style="display: flex; align-items: center; margin: 16px 0 0 16px">
        <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
        <span style="font-weight: 400; font-size: 18px; color: #333333">全部门店</span>
      </div>
      <div style="display: flex; padding: 20px 16px">
        <el-input
          v-model="searchSalon"
          size="small"
          placeholder="搜索门店"
          clearable
          style="margin-right: 12px"></el-input>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          plain
          :disabled="leftSalon.isFetching"
          @click.stop="loadSalonList">
          查询
        </el-button>
      </div>
      <i v-if="leftSalon.isFetching" class="el-icon-loading"></i>
      <div v-else>
        <div
          v-for="(item, index) in leftSalon.dataList"
          :key="index"
          class="salon-div"
          :style="{
            'background-color': activeSalon === index ? '#F0F0FF' : '#fff',
            color: activeSalon === index ? '#724EFF' : '#666666',
          }"
          @click="clkSalon(index, item.id)">
          <div style="display: flex; justify-content: space-between; margin-bottom: 12px">
            <div style="font-weight: 400; font-size: 14px">门店名称：{{ item.sname }}</div>
            <div v-if="item.status === 0" style="padding: 3px 12px; background-color: #fff2e5; color: #ff8e24">
              履约期
            </div>
            <div v-else-if="item.status === 1" style="padding: 3px 12px; background-color: #ecf5ff; color: #409eff">
              试用期
            </div>
            <div v-else style="padding: 3px 12px; background-color: #f5f5f5; color: #666">停滞期</div>
          </div>
          <span style="font-weight: 400; font-size: 14px">重点占比：{{ item.rate }}%</span>
          <span style="font-weight: 400; font-size: 14px; margin: 0 0 0 10px">全部顾客：{{ item.clerkCount }}</span>
        </div>
      </div>

      <pagination
        v-show="leftSalon.total > 0"
        :total="leftSalon.total"
        :page.sync="leftSalon.listQuery.page"
        :limit.sync="leftSalon.listQuery.limit"
        :layout="'total, prev, next, jumper'"
        @pagination="loadSalonList"></pagination>
    </div>
    <div style="width: 76%; height: 100%; background-color: #f8f8fa">
      <div style="width: 100%; height: 170px; margin-bottom: 12px; display: flex; justify-content: space-evenly">
        <div
          style="
            width: 203px;
            height: 100%;
            padding: 16px;
            padding: 16px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-1.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">时间线更新</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ todayRecord }}</div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <div style="display: flex">
              <div>总数：</div>
              <div style="color: #ee5d5d">+{{ allRecord }}</div>
            </div>
            <div
              v-if="todayRecord > 0"
              style="background-color: rgba(255, 91, 91, 0.1); color: #ff5b5b; padding: 3px 12px">
              有新增
            </div>
          </div>
        </div>
        <div
          style="
            width: 203px;
            height: 100%;
            padding: 16px;
            padding: 16px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-2.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">新增顾客</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ todayClerk }}</div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <div style="display: flex">
              <div>总数：</div>
              <div style="color: #ee5d5d">+{{ allClerk }}</div>
            </div>
            <div
              v-if="todayClerk > 0"
              style="background-color: rgba(255, 91, 91, 0.1); color: #ff5b5b; padding: 3px 12px">
              有新增
            </div>
          </div>
        </div>
        <div
          style="
            width: 203px;
            height: 100%;
            padding: 16px;
            padding: 16px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-3.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">今日到院</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+0</div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <div style="display: flex">
              <div>今日新增：</div>
              <div style="color: #ee5d5d">+0</div>
            </div>
            <div v-if="false" style="background-color: rgba(255, 91, 91, 0.1); color: #ff5b5b; padding: 3px 12px">
              有新增
            </div>
          </div>
        </div>
        <div
          style="
            width: 203px;
            height: 100%;
            padding: 16px;
            padding: 16px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-4.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">信任标签</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ todayTrust }}</div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <div style="display: flex">
              <div>总标记：</div>
              <div>{{ allTrust }}人</div>
            </div>
          </div>
        </div>
        <div
          style="
            width: 203px;
            height: 100%;
            padding: 16px;
            padding: 16px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-5.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">成交金额</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ todayMoney ? todayMoney : 0 }}</div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <div style="display: flex">
              <div>本月成交：</div>
              <div>￥{{ monthMoney ? monthMoney : 0 }}</div>
            </div>
          </div>
        </div>
        <div
          style="
            width: 203px;
            height: 100%;
            padding: 16px;
            padding: 16px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
          ">
          <div style="display: flex; align-items: center">
            <img src="@/assets/images/jgsj-6.png" width="35" height="35" />
            <div style="margin-left: 16px; font-weight: 500; font-size: 20px; color: #666666">重点顾客</div>
          </div>
          <div style="font-weight: 600; font-size: 32px; color: #4d4d4d">+{{ todayNoble }}</div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <div style="display: flex">
              <div>总标记：</div>
              <div>{{ allNoble }}人</div>
            </div>
            <div
              v-if="todayNoble > 0"
              style="background-color: rgba(255, 91, 91, 0.1); color: #ff5b5b; padding: 3px 12px">
              有新增
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 380px; margin: 0 10px; display: flex; justify-content: space-between">
        <div
          style="
            width: 756px;
            height: 100%;
            background-color: #fff;
            padding: 16px;
            overflow-x: hidden;
            overflow-y: auto;
          ">
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex; align-items: center">
              <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
              <span style="font-weight: 400; font-size: 18px; color: #333333">活跃度排名</span>
            </div>
            <div style="display: flex">
              <el-input style="margin-right: 12px" placeholder="搜索管家" size="mini"></el-input>
              <el-button type="primary" icon="el-icon-search" plain size="mini">查询</el-button>
            </div>
          </div>
          <div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column label="排名" type="index" width="50" align="center"></el-table-column>
              <el-table-column prop="kname" label="管家" width="160" align="center"></el-table-column>
              <el-table-column prop="checkin" label="今日到院" align="center"></el-table-column>
              <el-table-column prop="records" label="时间线" align="center"></el-table-column>
              <el-table-column prop="trust" label="已破冰" align="center"></el-table-column>
              <el-table-column prop="money" label="成交金额" width="160" align="center"></el-table-column>
              <el-table-column prop="consumer" label="顾客数量" align="center"></el-table-column>
            </el-table>
          </div>
        </div>
        <div style="width: 516px; height: 100%; background-color: #fff; padding: 16px">
          <div style="display: flex; align-items: center">
            <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
            <span style="font-weight: 400; font-size: 18px; color: #333333">顾客分布</span>
          </div>
          <div style="height: 100%; display: flex; flex-direction: column; justify-content: space-evenly">
            <div
              style="
                width: 100%;
                height: 100px;
                background: #fafafa;
                padding: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              ">
              <div style="display: flex; justify-content: space-between; align-items: center">
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">全部顾客</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">{{ allClerk }}</div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">重点关注</div>
                  <div style="color: #ff6666; font-weight: 400; font-size: 16px">{{ allNoble }}</div>
                </div>
                <div style="width: 1px; height: 20px; border: 1px solid #724eff"></div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">S级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ gradeObj[0] ? gradeObj[0].s : 0 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">C级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ gradeObj[0] ? gradeObj[0].c : 0 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">B级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ gradeObj[0] ? gradeObj[0].b : 0 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">A级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ gradeObj[0] ? gradeObj[0].a : 0 }}
                  </div>
                </div>
                <div>
                  <div style="color: #666; font-weight: 400; font-size: 16px; margin-bottom: 12px">未定级</div>
                  <div style="color: #724eff; font-weight: 400; font-size: 16px">
                    {{ gradeObj[0] ? gradeObj[0].o : 0 }}
                  </div>
                </div>
              </div>
              <div style="display: flex; font-size: 14px">
                <div style="color: #666">重点顾客(占比)：</div>
                <div style="color: #ff5b5b">
                  {{ allClerk === 0 ? '0.0' : parseFloat((allNoble * 100) / allClerk).toFixed(1) }}%
                </div>
              </div>
            </div>
            <div
              style="
                width: 100%;
                height: 66px;
                background: #fafafa;
                padding: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              ">
              <div style="font-size: 14px; color: #724eff">消费能力标签(占比)</div>
              <div style="display: flex; justify-content: space-between">
                <div style="font-size: 14px; color: #666">
                  超有钱：{{
                    allClerk === 0 || !richObj[0] ? '0.0' : parseFloat((richObj[0].s * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  有钱：{{
                    allClerk === 0 || !richObj[0] ? '0.0' : parseFloat((richObj[0].a * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  普通：{{
                    allClerk === 0 || !richObj[0] ? '0.0' : parseFloat((richObj[0].b * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  没钱：{{
                    allClerk === 0 || !richObj[0] ? '0.0' : parseFloat((richObj[0].c * 100) / allClerk).toFixed(1)
                  }}%
                </div>
              </div>
            </div>
            <div
              style="
                width: 100%;
                height: 66px;
                background: #fafafa;
                padding: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              ">
              <div style="font-size: 14px; color: #3a974c">信任标签(占比)</div>
              <div style="display: flex; justify-content: space-between">
                <div style="font-size: 14px; color: #666">
                  未破冰：{{
                    allClerk === 0 || !trustObj[0] ? '0.0' : parseFloat((trustObj[0].c * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  已破冰：{{
                    allClerk === 0 || !trustObj[0] ? '0.0' : parseFloat((trustObj[0].b * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  已信任：{{
                    allClerk === 0 || !trustObj[0] ? '0.0' : parseFloat((trustObj[0].a * 100) / allClerk).toFixed(1)
                  }}%
                </div>
              </div>
            </div>
            <div
              style="
                width: 100%;
                height: 66px;
                background: #fafafa;
                padding: 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              ">
              <div style="font-size: 14px; color: #f29339">状态标签(占比)</div>
              <div style="display: flex; justify-content: space-between">
                <div style="font-size: 14px; color: #666">
                  正常：{{
                    allClerk === 0 || !dengjiObj[0] ? '0.0' : parseFloat((dengjiObj[0].s * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  预警：{{
                    allClerk === 0 || !dengjiObj[0] ? '0.0' : parseFloat((dengjiObj[0].a * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  失速：{{
                    allClerk === 0 || !dengjiObj[0] ? '0.0' : parseFloat((dengjiObj[0].b * 100) / allClerk).toFixed(1)
                  }}%
                </div>
                <div style="font-size: 14px; color: #666">
                  放弃：{{
                    allClerk === 0 || !dengjiObj[0] ? '0.0' : parseFloat((dengjiObj[0].c * 100) / allClerk).toFixed(1)
                  }}%
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: 100%; height: 270px; margin: 10px; display: flex; justify-content: space-between">
        <div style="width: 756px; height: 100%; background-color: #fff; padding: 16px">
          <div style="display: flex; justify-content: space-between">
            <div style="display: flex; align-items: center">
              <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
              <span style="font-weight: 400; font-size: 18px; color: #333333">成交情况</span>
            </div>
            <div>
              <el-input placeholder="时间" size="mini"></el-input>
            </div>
          </div>
          <div style="color: #724eff; font-weight: 400; font-size: 16px">本月总业绩：￥{{ monthMoney }}</div>
        </div>
        <div
          style="
            width: 516px;
            height: 100%;
            background-color: #fff;
            padding: 16px;
            overflow-x: hidden;
            overflow-y: auto;
          ">
          <div style="display: flex; align-items: center">
            <div style="width: 2px; height: 16px; border: 2px solid #724eff; margin-right: 11px"></div>
            <span style="font-weight: 400; font-size: 18px; color: #333333">实时动态</span>
          </div>
          <div>
            <el-table :data="tableData" :show-header="false" :stripe="true" size="mini" style="width: 100%">
              <el-table-column prop="date" label="日期" width="100"></el-table-column>
              <el-table-column prop="name" label="姓名" width="100"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getSalonSimplePage } from '@/api/salon';
import {
  activity,
  countAllBySid,
  countAllClerkBySid,
  countDengjiBySid,
  countGradeBySid,
  countMoneyMonthBySid,
  countMoneyTodayBySid,
  countNobleAllBySid,
  countNobleTodayBySid,
  countRichBySid,
  countTodayBySid,
  countTodayClerkBySid,
  countTrustAllBySid,
  countTrustBySid,
  countTrustTodayBySid,
} from '@/api/ym';
// 引入自定义组件
import Pagination from '@/components/Pagination';
// 引入第三方组件
import { MessageBox } from 'element-ui';

export default {
  name: 'SalonStatistics',
  components: { Pagination },
  data() {
    return {
      tableData: [],
      activeSalon: null,
      leftSalon: {
        dataList: [],
        listQuery: { page: 1, limit: 5 },
        total: 0,
        isFetching: false,
      },
      nobleStatList: [],
      searchSalon: '',
      todayRecord: 0,
      allRecord: 0,
      todayClerk: 0,
      allClerk: 0,
      todayTrust: 0,
      allTrust: 0,
      todayNoble: 0,
      allNoble: 0,
      todayMoney: 0,
      monthMoney: 0,
      gradeObj: [
        {
          o: 0,
          c: 0,
          b: 0,
          a: 0,
          s: 0,
        },
      ],
      richObj: [
        {
          s: 0,
          a: 0,
          b: 0,
          c: 0,
        },
      ],
      dengjiObj: [
        {
          s: 0,
          a: 0,
          b: 0,
          c: 0,
        },
      ],
      trustObj: [
        {
          a: 0,
          b: 0,
          c: 0,
        },
      ],
    };
  },
  computed: {},
  async created() {
    this.loadSalonList();
  },
  methods: {
    loadSalonList: async function () {
      if (this.leftSalon.isFetching) {
        return;
      }
      this.leftSalon.isFetching = true;
      const params = { pageNumber: this.leftSalon.listQuery.page, pageSize: this.leftSalon.listQuery.limit };
      if (this.searchSalon) {
        params.sname = this.searchSalon;
      }
      this.leftSalon.dataList.splice(0, this.leftSalon.dataList.length);
      const errAlertMsg = '查询门店列表出错';
      await getSalonSimplePage(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.leftSalon.total = ret.total;
            if (ret.records && ret.records.length) {
              this.leftSalon.dataList = ret.records;
            }
          }
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.leftSalon.isFetching = false;
        });
    },
    clkSalon(index, sid) {
      this.activeSalon = index;

      // 各项统计
      // 活跃度
      activity(sid).then(res => {
        this.tableData = res.data.data;
      });
      // 时间线更新
      countAllBySid(sid).then(res => {
        this.allRecord = res.data.data;
      });
      countTodayBySid(sid).then(res => {
        this.todayRecord = res.data.data;
      });
      // 新增顾客
      countAllClerkBySid(sid).then(res => {
        this.allClerk = res.data.data;
      });
      countTodayClerkBySid(sid).then(res => {
        this.todayClerk = res.data.data;
      });
      // 已信任
      countTrustAllBySid(sid).then(res => {
        this.allTrust = res.data.data;
      });
      countTrustTodayBySid(sid).then(res => {
        this.todayTrust = res.data.data;
      });
      // 成交金额
      countMoneyMonthBySid(sid).then(res => {
        this.monthMoney = res.data.data;
      });
      countMoneyTodayBySid(sid).then(res => {
        this.todayMoney = res.data.data;
      });
      // 重要顾客
      countNobleAllBySid(sid).then(res => {
        this.allNoble = res.data.data;
      });
      countNobleTodayBySid(sid).then(res => {
        this.todayNoble = res.data.data;
      });
      // 顾客等级
      countGradeBySid(sid).then(res => {
        this.gradeObj = res.data.data;
      });
      // 有钱占比
      countRichBySid(sid).then(res => {
        this.richObj = res.data.data;
      });
      // 信任占比
      countTrustBySid(sid).then(res => {
        this.trustObj = res.data.data;
      });
      // 状态占比
      countDengjiBySid(sid).then(res => {
        this.dengjiObj = res.data.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.salon-div {
  padding: 16px 20px;
  transition: background-color 0.3s; /* 平滑背景色过渡 */
}
</style>
